<link href="<?php echo $this->config['css']; ?>/slide.css" media="screen" rel="stylesheet" type="text/css" />
<?php
if (!empty($this->arrSlidePhotoResult)) {?>
    <div class="content_box_images_news">
        <div class="v5-carousel enable-carousel" options="speed=700&auto=7000">
            <div class="big_slide">
                <div class="carousel-hero-holder">
                    <div class="carousel-hero-rail">
                    <?php foreach ($this->arrSlidePhotoResult as $arrSlidePhoto) {?>
                        <div class="carousel-hero-item hero-standard" type="standard">
                            <a id="show_popup" href="#"><img class="hero-img" src="<?php $this->Imageurl($arrSlidePhoto['thumbnail_url']); ?>" load="/images/graphics/img_643x480.jpg"/></a>
                            <h3 class=""><?php echo $arrSlidePhoto['caption']; ?></h3>
                        </div>
                    <?php } ?>

                    </div>
                </div>
            </div>
            <!--Begin popup-->
            <div class="main_ct_popup" style="display:none">
                <div class="windowmask">&nbsp;</div>
                <div class="content_pupop" >
                    <div id="gallery" class="ad-gallery">
                        <div class="main_content_slide">
                            <div class="ad-image-wrapper">
                            </div>
                            <div class="ad-controls">
                                 <?php echo $this->render('common/box_share.phtml'); ?>
                            </div>

                        </div>
                        <div class="thumb">
                            <div class="ad-nav">
                                <div class="ad-thumbs">
                                    <ul class="ad-thumb-list">
                                        <?php
                                        foreach ($this->arrSlidePhotoResult as $arrSlidePhoto) {
                                            ?>
                                            <li>
                                                <a href="/images/10.jpg">
                                                    <span class="light">&nbsp;</span>
                                                    <img src="/images/thumbs/t10.jpg" class="image0" height="90" alt="" title="hinh demo 1">
                                                </a>
                                            </li>
                                            <?php
                                        }
                                        ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="btn_close_popup"><a href="javascript:;">&nbsp;</a></div>
                    </div>

                </div>
            </div>
            <!--End popup-->
            <!--carousel-hero-holder-->
            <div class="carousel-list-holder">
                <ul class="carousel-list-rail">
                    <?php
                    foreach ($this->arrSlidePhotoResult as $arrSlidePhoto) {
                        ?>
                        <li class="carousel-list-item carousel-list-t1 "> <a class="carousel-list-link" href="javascript:;"><img src="/images/graphics/img_290x217.jpg" width="290" /><span class="light"><?php echo $arrSlidePhoto['caption']; ?></span></a></li>
                        <?php
                    }
                    ?>
                </ul>
            </div>
            <!--carousel-list-holder-->
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <?php
}
?>

<script type="text/javascript" src="<?php echo $this->config['js']; ?>/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/script.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/lib/lib.js"></script>

<script type="text/javascript" src="<?php echo $this->config['js']; ?>/slides.js"></script>

<script language="javascript" type="text/javascript" src="<?php echo $this->config['js']; ?>/slides.min.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/jquery.ad-gallery.js"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#show_popup').live('click', function showPopup(){
            $('.main_ct_popup').fadeIn(0);
            var ctheight = $(window).height();
            var ctwidth = $(window).width();
            var ctpopupwidth = $('#gallery').width();
            var ctpopupheight = $('#gallery').height();
            $('.content_pupop').css("left",(ctwidth- ctpopupwidth)/2);
            $('body').css('overflow' , 'hidden');

            $('.btn_close_popup a').click(
            function(){
                $('.main_ct_popup').fadeOut(0);
                $('body').css('overflow' , 'auto');
            }

        );

            var galleries = $('.ad-gallery').adGallery();
            $('#switch-effect').change(
            function() {
                galleries[0].settings.effect = $(this).val();
                return false;
            }
        );
            $('#toggle-slideshow').click(
            function() {
                galleries[0].slideshow.toggle();
                return false;
            }
        );
            $('#toggle-description').click(
            function() {
                if(!galleries[0].settings.description_wrapper) {
                    galleries[0].settings.description_wrapper = $('#descriptions');
                } else {
                    galleries[0].settings.description_wrapper = false;
                }
                return false;
            }
        );
        }
    );
    });
</script>